<template>
  <div>
    <div class="carousel">
      <!-- 轮播图开始 -->
      <div class="block" >
        <el-carousel height="400px" >
          <el-carousel-item >
            <img width="1840px" src = 'https://s3.bmp.ovh/imgs/2022/04/11/9094af27a473a97f.png' />
          </el-carousel-item>
          <el-carousel-item >
            <img width="1840px" src = 'https://s3.bmp.ovh/imgs/2022/04/11/6a7c8a1f0ddaf68c.png' />
          </el-carousel-item>
          <el-carousel-item >
            <img width="1840px" src = 'https://s3.bmp.ovh/imgs/2022/04/11/5124674ab7f6ba18.png' />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 轮播图结束 -->
    </div>
    <!-- 旅游景点开始 -->
    <el-divider></el-divider>
    <el-row  style="text-align: center;padding-top: 10px;">
      <el-col :span="6">
        <h5></h5>
      </el-col>
      <el-col :span="3">
        <img width="100px" height="100px" src="https://s3.bmp.ovh/imgs/2022/04/12/684834c9e269c802.png"/>
        <h3>超值低价</h3>
        <span>高额返现</span>
      </el-col>
      <el-col :span="3">
        <img width="100px" height="100px" src="https://s3.bmp.ovh/imgs/2022/04/12/fd440c0000f15b41.jpg"/>
        <h3>全网覆盖</h3>
        <span>国内、国际门票一网打尽</span>
      </el-col>
      <el-col :span="3">
        <img width="100px" height="100px" src="https://s3.bmp.ovh/imgs/2022/04/12/5ec6c8364c25acf7.jpg"/>
        <h3>购票便捷</h3>
        <span>便捷购票、快速出票</span>
      </el-col>
      <el-col :span="3">
        <img width="100px" height="100px" src="https://s3.bmp.ovh/imgs/2022/04/12/127d194659fbd3f8.jpg"/>
        <h3>保障计划</h3>
        <span>门票保障计划、助你游玩无忧</span>
      </el-col>
      <el-col :span="6">
        <h5></h5>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="pro">
      <div class="wrapper">
        <div class="title">热门景点</div>
        <div class="art">
          <el-row :gutter="20">
            <div
                    class="left"
                    v-for="item in scenicList"
                    :key="item.id"
                    @click="goDetail(item.id)"
            >
              <el-col :span="6"
              ><div class="grid-content bg-purple">
                <div class="pic"><img width="100%" :src="item.pic" /></div>
                <div class="text" style="text-align: center">
                  <div class="name">{{ item.name }}</div>
                </div>
                <div class="top"></div></div
              ></el-col>
            </div>
          </el-row>
        </div>
      </div>
    <!--</div>-->
    <!-- 旅游景点结束 -->
    <el-row >
      <el-col :span="16">
        <div class="article">
          <div class="wrapper">
            <div class="title" >热门游记</div>
            <div class="project" v-for="item in travels" :key="item.id" @click="goTravelDetail(item.id)">
              <div class="left">
                <img
                        width="100%"
                        :src="item.pic"
                        alt=""
                />
              </div>
              <div class="right">
                <div class="name" >游记标题：{{item.name}}</div>
                <div class="date">游记内容：{{item.content}}</div>
                <div  style="margin-top: 100px"><img width="18px" height="18px" src="https://s3.bmp.ovh/imgs/2022/04/12/3f9363aa4666717e.jpeg"/>
                  <label style="font-size: 20px">({{item.goodNum}})</label></div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="about" >关于我们</div>
        <div class="project" >
          <div class="left">
            <img width="100%" height="20%" src="https://s3.bmp.ovh/imgs/2022/04/07/351ed7f7c546ef00.jpg"/>
            <h1></h1>
            <span>沐阳是中国领先的旅行玩乐社区，也是中国年轻一代用得更多的旅行网站。
得益于“内容+交易”的核心优势，沐阳旅游更理解年轻人的偏好，让复杂的旅游决策、预订和体验变得简单、高效和便捷，是旅游消费决策的第一入口。
提供了旅游目的地的玩乐、特色小吃、当地体验等信息和产品预订服务。
自2022年公司化运营以来，经大量旅行者自主分享，沐阳社区的信息内容不断丰富和完善，帮助许多的旅行者出行，成为年轻一代首选的“旅行神器”。
出门玩之前，先上沐阳！</span>
          </div>
        </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>


<script>
import { getScenic,hotTravels } from "@/utils/request";
export default {
    name: "Person",
  data() {
    return {
        scenicList:[],
        travels:[],
        queryParams: {
            name:null,
            pageNum: 1,
            pageSize: 4,
            total:0
        },
        queryParams2: {
            name:null,
            pageNum: 1,
            pageSize: 4,
            total:0
        }
    }
  },
  methods: {
      listDataApi(){
          getScenic(this.queryParams).then(res => {
              if(res.code == 200){
                  this.scenicList = res.rows;
                  this.queryParams.total=res.total;
              }else{
                  this.$message({
                      type:'error',
                      message:res.msg
                  })
              }
          })
      },
      findTravels() {
          hotTravels().then(res => {
              if (res.code == 200) {
                  this.travels = res.data;
              } else {
                  this.$message({
                      type: 'error',
                      message:res.msg
                  })
              }
          })
      },
      goDetail(id){
          // 跳转到详情页面，并且传递id
          this.$router.push({path:'/scenicDetail',query:{id:id}})
      },goTravelDetail(id){
          // 跳转到详情页面，并且传递id
          this.$router.push({path:'/travelsDetail',query:{id:id}})
      },
  },
  created() {
      this.listDataApi();
      this.findTravels()
  },
}
</script>

<style scoped lang='scss'>
  .pro{
    .wrapper {
      width: 1240px;
      .title {
        font-size: 20px;
        line-height: 80px;
        border-bottom: 1px solid #f4f4f4;
      }
      .project {
        display: flex;
        padding: 1em 0;
        border-bottom: 1px solid #f4f4f4;
        .left {
          width: 300px;
          height: 200px;
          background-color: #f4f4f4;
          border-radius: 5px;
          overflow: hidden;
        }
        .right {
          flex: 1;
          padding: 0 2em;
          .name {
            font-weight: bolder;
            font-size: 1em;
          }
          .date {
            margin: 1em 0;
          }
        }
      }
    }
  }
.article{
  .wrapper {
    width: 740px;
    .title {
      font-size: 20px;
      line-height: 80px;
      border-bottom: 1px solid #f4f4f4;
    }
    .project {
      display: flex;
      padding: 1em 0;
      border-bottom: 1px solid #f4f4f4;
      .left {
        width: 300px;
        height: 200px;
        background-color: #f4f4f4;
        border-radius: 5px;
        overflow: hidden;
      }
      .right {
        flex: 1;
        padding: 0 2em;
        .name {
          font-weight: bolder;
          font-size: 1em;
        }
        .date {
          margin: 1em 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
  .about{
    font-size: 20px;
    line-height: 80px;
    border-bottom: 1px solid #f4f4f4;
  }
</style>
